<template>
	<view style="height: 100vh; background: #181818; position: relative; color: #ffffff;">

		<!--底部弹出层获取手机号码-->
		<u-popup :round="38" :show="phonePopup" mode="bottom" @close="getPhoneClose" @open="getPhoneOpen">
			<view class="get_phone_popup">
				<view style="height: 80rpx;"></view>
				<view class="tips">是否确认使用当前手机号</view>
				<view style="height: 90rpx;"></view>
				<button class="verify" type="default" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">获取手机号</button>
				<view style="height: 45rpx;"></view>
				<view class="cancel" @click="getPhoneClose">取消</view>
				<image @click="getPhoneClose" class="close_incon" src="../../static/icon/close_incon.png"
					style="width: 23.58px; height:23.58px ;" />
			</view>
		</u-popup>

		<bakc text="登录" :isReturn="false" textMLeft='margin-left: 185rpx;' />
		<!--我的-->
		<view class="login">
			<view style="height: 40rpx;"></view>
			<image src="../../static/mecha/login/logo.png" style="width: 490rpx; height:230rpx ;" />
			<view>甲 醛 在 线 检 测 仪</view>

			<view style="height: 70rpx;"></view>

			<view style="display: flex;">
				<image src="../../static/mecha/login/shang_logo.png" style="width: 140rpx; height:178rpx ;" />
				<view style="width: 80rpx;"></view>
				<image src="../../static/mecha/login/shang_logo_two.png" style="width: 160rpx; height:158rpx ;" />
			</view>

			<view style="height: 60rpx;"></view>
			<view>上海大学</view>
			<view style="color: #AFAFAF;">SHANGHAI UNIVERSITY</view>


			<view style="height: 60rpx;"></view>
			<view>有机复合污染控制工程教育部重点实验室</view>
			<view style="font-size: 10rpx; color: #AFAFAF;">ORGANIC HCOMPOUND POEIUTON CONROL ENGNEEAING</view>

			<view style="height: 120rpx;"></view>
			<view style="position: relative;" @click="login">
				<image src="../../static/mecha/login/login.png" style="width: 520rpx; height:130rpx ;" />
				<view style="position: absolute; top: 40rpx; left: 180rpx; font-size: 40rpx;">快捷登录</view>
			</view>
		</view>


		<view class="privacy">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index">
				</u-checkbox>
			</u-checkbox-group>
			<text style="color: rgb(96, 164, 225);" @click="toPrivacyAgreement">《空气检测服务条款》和《空气检测隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getPhone,
		getWxInfo,
		updateWxUserInfo,
		getPhoneNumber,
		updateUserInfo
	} from '@/config/api.js';
	export default {
		data() {
			return {
				checkboxValue1: [],

				checkboxList1: [{
					name: '',
					disabled: false
				}, ],
				//是否是新用户登录
				isNewUser: '',

				showPopup: false,


				//微信code
				wxCode: '',
				sessionKey: '',

				//获取手机号弹出层
				phonePopup: false,

				index: 0,
				value: true,
				checkboxValue1: [],
				checkboxList1: [{
					disabled: false
				}, ],
			}
		},
		onLoad() {

		},
		methods: {


			//获取手机号码相关的弹出层

			getPhoneClose() {
				this.phonePopup = false;
				this.toMain();
			},

			getPhoneOpen() {
				this.phonePopup = true;
			},



			//获取手机号码
			async decryptPhoneNumber(e) {
				//准备获取手机号码的参数
				let param = {
					code: e.target.code
				};
				//获取到手机号
				const resp = await getPhoneNumber(param);
				//修改用户信息将手机号码进行更新进去
				let userInfo = {
					nickname: "微信用户",
					"avatarUrl": "https://img0.baidu.com/it/u=10584534,1552504503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
					"gender": 1,
					"phoneNumber": resp.data
				}
			   await updateUserInfo(userInfo);
			   this.getPhoneClose();
			},

			//获取手机号码
			closePopup() {
				this.showPopup = false;
				this.toMain();
			},

			openPopup() {
				this.showPopup = true;
			},

			//去隐私协议页面
			toPrivacyAgreement() {
				uni.$u.route({
					url: 'pages/privacyAgreement/privacyAgreement'
				})
			},

			//用户协议 让用户钩选
			checkboxChange(n) {
				this.index = n[0]
				console.log('change', n);
			},
			
			
			//获取用户code
			getWxCode() {
				if (this.checkboxValue1.length) {
					wx.login({
						success: async (res) => {
							this.wxCode = res.code;
							//调用后端接口获取token 和 sessionkey
							const resp = await login({
								code: this.wxCode
							});
							//储存token 
							uni.setStorageSync("authentication", resp.data.token);

							// //获取用户信息
							const wxInfo = await getWxInfo();
							uni.setStorageSync("userInfo", wxInfo.data);
							setTimeout(() => {
								uni.hideLoading();
								//开启获取手机号的弹窗
								console.log(wxInfo.data.phoneNumber);
								if (wxInfo.data.phoneNumber) {
									this.toMain();
								} else {
									this.phonePopup = true;
								}

							}, 1500);

						}
					})
				} else {
					uni.showToast({
						title: '请先阅读并同意用户协议',
						icon: 'none'
					});
				}

			},
			//获取用户手机号
			async login() {
				// checkboxValue1
				//判断用户是否钩选同意协议

				uni.showLoading({
					title: '认证中...',
					mask: true
				})
				//先获取微信code
				this.getWxCode();
			},

			//去引导页
			toIntroductionPage() {
				uni.$u.route({
					type: 'redirect',
					url: "pages/introductionPage/IntroductionPage1/IntroductionPage1"
				})
			},

			//去配网页面
			toMain() {
				uni.switchTab({
					url: '/pages/newPage/newPage',
					fail: (e) => {
						console.log(e);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.get_phone_popup {
		width: 100%;
		height: 318px;
		background: #353535;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.tips {
			width: 628rpx;
			font-size: 19px;
		}


		.verify {
			width: 628rpx;
			height: 50px;
			background: #BC9C5E;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 18px;
		}

		.cancel {
			width: 628rpx;
			height: 50px;
			background: #181818;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 18px;
		}

		.close_incon {
			position: absolute;
			right: 40rpx;
			top: 40rpx;
		}
	}

	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.privacy {
		width: 600rpx;
		text-align: center;
		display: flex;
		position: absolute;
		bottom: 80rpx;
		left: 70rpx;
	}
</style>